<template>
    <div>
        <!-- 操作按钮 -->
        <a-button-group style="margin-top: 24px;margin-bottom: 10px;">
            <a-button icon="plus" @click="openModal(true)" type="primary" />
            <a-button icon="edit" @click="openModal(false)" type="primary" :disabled="selectedKeys[0] === '0'" />
            <a-button icon="delete" @click="deleteDept" type="danger" :disabled="selectedKeys[0] === '0'" />
        </a-button-group>
        <a-menu mode="inline" :selectedKeys="selectedKeys">
            <a-menu-item v-for="dept in deptList" :key="dept.id" @click="clickMenuItem(dept)">
                <a-icon v-if="dept.id === '0'" type="bars" />
                {{ dept['deptName'] }}
            </a-menu-item>
        </a-menu>

        <a-modal :title="modalTitle" :visible="modalVisible" @ok="onFormSubmit" @cancel="closeModal">
            <a-form :form="deptForm">
                <a-form-item style="display: none;">
                    <a-input type="text" v-decorator="[ 'id' ]" />
                </a-form-item>
                <!-- 部门名称 -->
                <a-form-item>
                    <a-input size="large" type="text" placeholder="部门名称" autocomplete="off"
                             v-decorator="[ 'deptName', { rules: [{ required: true, message: '请输入部门名称' }] } ]"
                    />
                </a-form-item>
            </a-form>
        </a-modal>

    </div>
</template>

<script>
    import { getSysDeptList,addSysDept,editSysDept,deleteSysDept } from '../../apis/upms';
    export default {
        data(){
            return {
                /**
                 * 部门列表
                 */
                deptList : [],
                /**
                 * 弹窗标题
                 */
                modalTitle : '',
                /**
                 * 控制弹窗是否显示
                 */
                modalVisible : false,

                selectedKeys : ['0'],

                deptForm : this.$form.createForm(this),

                onFormSubmit : () => {}
            };
        },
        created() {
            let $this = this;
            //  获取部门列表
            getSysDeptList().then(result => {
                result.data.unshift({ id : '0', deptName : '所有部门' });
                $this.deptList = result.data;
            });
            let deptId = $this.$route.query.deptId;
            if (deptId) {
                this.selectedKeys.splice(0,1);
                this.selectedKeys.push(deptId);
            }
        },
        methods : {
            /**
             * 点击菜单列表
             * @param item
             */
            clickMenuItem : function (item) {
                if (this.selectedKeys[0] !== item.id) {
                    this.selectedKeys.splice(0, 1);
                    this.selectedKeys.push(item.id);
                    const params = {...this.$route.query};
                    params.deptId = item.id;
                    this.$router.push({name: this.$route.name, query: params}).then();
                }
            },
            /**
             * 打开弹窗
             * @param isAdd
             */
            openModal : function (isAdd) {
                if (isAdd){
                    this.modalTitle = '新增部门';
                    this.onFormSubmit = this.onAddForm;
                } else {
                    this.modalTitle = '修改部门';
                    this.onFormSubmit = this.onEditForm;
                    let key = this.selectedKeys[0];
                    this.deptList.forEach(dept => {
                        if (dept.id === key){
                            setTimeout(() => this.deptForm.setFieldsValue({ id: dept.id,deptName: dept.deptName }),0);
                        }
                    })
                }
                this.modalVisible = true;
            },
            /**
             * 关闭弹窗
             */
            closeModal : function () {
                this.deptForm.resetFields();
                this.modalVisible = false;
            },

            onAddForm : function (e) {
                e.preventDefault();
                let $this = this;
                $this.deptForm.validateFields((err, params) => {
                    if (!err){
                        addSysDept(params).then((result) => {
                            $this.deptList.push(result.data);
                            $this.closeModal();
                        });
                    }
                });
            },

            onEditForm : function (e) {
                e.preventDefault();
                let $this = this;
                $this.deptForm.validateFields((err, params) => {
                    if (!err){
                        editSysDept(params).then(() => {
                            $this.deptList.forEach(item => {
                                if (params.id === item.id){
                                    item.deptName = params.deptName;
                                }
                            });
                            $this.closeModal();
                        });
                    }
                });
            },

            deleteDept : function (e) {
                e.preventDefault();
                let $this = this;
                let deptId = $this.selectedKeys[0];
                if (deptId && deptId !== 0){
                    deleteSysDept(deptId).then(() => {
                        let index;
                        for (let i = 0; i < $this.deptList.length; i ++){
                            if ($this.deptList[i].id === deptId){
                                index = i;
                                break;
                            }
                        }
                        if (index){
                            $this.deptList.splice(index,1);
                            $this.clickMenuItem({ id : '0' });
                        }
                    });
                }
            }

        }
    }
</script>
